import React from 'react'
import { View, SafeAreaView, FlatList, Text, StyleSheet } from 'react-native'
import { Header, ListItem, Avatar, Button } from 'react-native-elements'

import { HeaderTitle } from '~/components/header'

class Component extends React.Component {
  constructor (props) {
    super(props),

    this.state = {
      loaded: false,
      data: null
    }
  }

  componentDidMount () {
    const mockData = []
    for (var i = 0; i < 32; i++) {
      mockData.push({
        id: i,
        user: {
          id: 1000000 || i,
          name: 'Ameili Martin',
          avatar_url: 'http://bmi.jiantiao8.com:8000/s6/a6.jpg'
        },
        last: 'Avatars are found all over ui design...',
        badge: 20
      })
    }

    this.setState({
      data: mockData,
      loaded: true
    })
  }

  render () {
    const { navigation } = this.props;

    return (
      <View style = {{flex: 1}}>
        <Header
          placement="left"
          centerComponent={ HeaderTitle('消息(32)') }
          rightComponent={{ icon: 'home', color: '#fff' }}
        ></Header>

        <View style = {{flex: 1}}>
          <FlatList
            data = {this.state.data}
            renderItem = {(item) => this.renderItem(item, navigation)}
            keyExtractor = {(item, index)  => index.toString()}
            showsVerticalScrollIndicator = {false}
          />
        </View>
      </View>
    );
  }

  renderItem ({item}, navigation) {
    let { user, last } = item

    return (
      <ListItem bottomDivider onPress={() => { navigation.navigate('ChatChat')}}>
        <Avatar rounded size={48} source={{uri: user.avatar_url}} />
        <ListItem.Content>
          <ListItem.Title>{user.name}</ListItem.Title>
          <View style={styles.subtitleView}>
            <Text style={{flex: 1, color: '#2D3748'}}>{last}</Text>
            <Text style={styles.lastTime}>20分钟前</Text>
          </View>
        </ListItem.Content>
      </ListItem>
    )
  }
}

styles = StyleSheet.create({
  subtitleView: {
    flexDirection: 'row',
    // paddingLeft: 10,
    paddingTop: 0
  },
  lastTime: {
    color: '#A0AEC0'
  }
})
export default Component;
